import React, {FC} from "react";
import './style.css'
import {TimerProps} from "../../types/timer";

interface HorizontalTitleProps extends TimerProps {
}

const HorizontalTitle: FC<HorizontalTitleProps> = (props: HorizontalTitleProps) => {
	const {width} = props
	const timeTitleWith = (width! - 66) / 2;
	/**
	 * 渲染24小时格子
	 */
	const renderHoursBlocks = (): any => {
		return new Array(24).fill(0).map((item, index) => <div className='hour_item' key={index} style={{width: (width!-88)/24}}>{index}</div>)
	}
	return (
		<div className='horizontal_title_container'>
			<span className='week_time'>时间/星期</span>
			<div>
				<div className='horizontal_time_title'>
					<div style={{width: timeTitleWith}}>00:00 - 12:00</div>
					<div style={{width: timeTitleWith}}>12:00 - 24:00</div>
				</div>
				<div className='hours_container'>
					{renderHoursBlocks()}
				</div>
			</div>
		</div>
	)
}
export default HorizontalTitle